<template>
  <div class="common-layout">
    <el-container class="layout">
      <el-aside class="aside">
        <div class="aside-search">
          <slot name="aside-search"></slot>
        </div>
        <div class="aside-content">
          <slot name="aside-content"></slot>
        </div>
      </el-aside>
      <el-container class="right">
        <div class="header" v-if="showHeader">
          <slot name="header"></slot>
        </div>
        <el-main class="main">
          <slot name="main"></slot>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

defineProps({
  showHeader: {
    type: Boolean,
    default: false
  }
})
</script>

<style scoped lang="scss">
:deep(.el-main) {
  padding: 0;
}

.common-layout {
  padding: 20px;
  width: 100%;
  height: 100%;
  background: url('@/assets/formbg.png') no-repeat center center;
  color: #fff;
  .layout {
    height: 100%;

    .aside {
      background-color: rgba($color: #032f62, $alpha: 0.8);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      width: 400px;
      height: 100%;
      margin-right: 10px;

      &-search {
        // min-height: 60px;
        display: flex;
        align-items: center;
        padding: 10px 20px;
      }

      &-content {
        height: calc(100% - 70px);
        // flex: 1;
        padding: 10px 20px;
      }
    }
  }

  .right {
    background-color: rgba($color: #022a5b, $alpha: 0.8);
    padding: 10px;
    display: flex;
    flex-direction: column;

    .header {
      padding: 10px 20px;
      margin-bottom: 10px;
    }

    .main {
      padding: none;
      width: 100%;
      height: 100%;
    }
  }
}
</style>
